// 先导入变量
@use './_variables' as *;
@use './_mixins' as *;
@use './_components' as *;

// Banner组件样式
.banner {
  position: relative;
  height: 400px;
  overflow: hidden;
  margin-top: $header-height;

  &-slide {
    height: 100%;
    background-position: center;
    background-size: cover;
    
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  &-title {
    font-size: 36px;
    color: $background-color-white;
    margin-bottom: $spacing-base;
    animation: slideInLeft 1s;
  }

  &-subtitle {
    font-size: $font-size-large;
    color: rgba($background-color-white, 0.9);
    margin-bottom: $spacing-extra-large;
    animation: slideInRight 1s;
  }

  &-btn {
    @extend .btn;
    @extend .btn-primary;
    animation: fadeIn 1.5s;
  }
}

// Banner动画
@keyframes slideInLeft {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

// 提供一个 mixin 供其他组件使用
@mixin banner-base {
  position: relative;
  height: 400px;
  overflow: hidden;
  margin-top: $header-height;
} 